<template>
  <view class="icon-generator">
    <view class="title">图标生成器</view>
    <view class="description">将SVG图标转换为PNG</view>
    
    <view class="icon-container">
      <view class="icon-item" v-for="(item, index) in icons" :key="index">
        <view class="icon-name">{{item.name}}</view>
        <view class="icon-preview">
          <view class="svg-container" :id="'svg-container-' + index">
            <rich-text :nodes="item.svg"></rich-text>
          </view>
          <view class="img-container">
            <image v-if="item.dataUrl" :src="item.dataUrl" mode="aspectFit"></image>
          </view>
        </view>
        <button class="convert-btn" @tap="convertToPng(index)">转换为PNG</button>
        <button class="save-btn" v-if="item.dataUrl" @tap="saveImage(item)">保存图片</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      icons: [
        {
          name: '首页图标',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>',
          dataUrl: '',
          filename: 'home.png'
        },
        {
          name: '首页图标（激活）',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#8B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>',
          dataUrl: '',
          filename: 'home-active.png'
        },
        {
          name: '宠物档案图标',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>',
          dataUrl: '',
          filename: 'pet.png'
        },
        {
          name: '宠物档案图标（激活）',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#8B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>',
          dataUrl: '',
          filename: 'pet-active.png'
        },
        {
          name: '我的图标',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>',
          dataUrl: '',
          filename: 'my.png'
        },
        {
          name: '我的图标（激活）',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#8B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>',
          dataUrl: '',
          filename: 'my-active.png'
        },
        {
          name: '头部背景',
          svg: '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200"><defs><pattern id="paw-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="15" fill="#FFFFFF" opacity="0.1" /><circle cx="35" cy="30" r="8" fill="#FFFFFF" opacity="0.1" /><circle cx="65" cy="30" r="8" fill="#FFFFFF" opacity="0.1" /><circle cx="35" cy="70" r="8" fill="#FFFFFF" opacity="0.1" /><circle cx="65" cy="70" r="8" fill="#FFFFFF" opacity="0.1" /><circle cx="85" cy="85" r="10" fill="#FFFFFF" opacity="0.08" /><circle cx="75" cy="72" r="5" fill="#FFFFFF" opacity="0.08" /><circle cx="95" cy="72" r="5" fill="#FFFFFF" opacity="0.08" /><circle cx="75" cy="98" r="5" fill="#FFFFFF" opacity="0.08" /><circle cx="95" cy="98" r="5" fill="#FFFFFF" opacity="0.08" /><circle cx="15" cy="15" r="8" fill="#FFFFFF" opacity="0.06" /><circle cx="10" cy="8" r="4" fill="#FFFFFF" opacity="0.06" /><circle cx="20" cy="8" r="4" fill="#FFFFFF" opacity="0.06" /><circle cx="10" cy="22" r="4" fill="#FFFFFF" opacity="0.06" /><circle cx="20" cy="22" r="4" fill="#FFFFFF" opacity="0.06" /></pattern></defs><rect width="400" height="200" fill="url(#paw-pattern)" /></svg>',
          dataUrl: '',
          filename: 'header-pattern.png'
        }
      ]
    };
  },
  onLoad() {
    // 页面加载时等待DOM完成渲染
    setTimeout(() => {
      this.icons.forEach((item, index) => {
        this.convertToPng(index);
      });
    }, 500);
  },
  methods: {
    convertToPng(index) {
      const icon = this.icons[index];
      const svgContainer = document.getElementById('svg-container-' + index);
      
      if (!svgContainer) {
        console.error('SVG 容器未找到', index);
        uni.showToast({
          title: '转换失败，SVG容器未找到',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 使用Canvas绘制SVG内容
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // 设置Canvas大小
        canvas.width = 96;
        canvas.height = 96;
        
        // 创建SVG数据URL
        const svgData = icon.svg;
        const img = new Image();
        img.onload = () => {
          // 在Canvas上绘制SVG
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          
          // 获取PNG数据URL
          const dataUrl = canvas.toDataURL('image/png');
          this.icons[index].dataUrl = dataUrl;
          
          console.log('转换成功:', icon.name);
        };
        
        // 使用Blob创建URL
        const blob = new Blob([svgData], {type: 'image/svg+xml'});
        img.src = URL.createObjectURL(blob);
      } catch (error) {
        console.error('转换出错', error);
        uni.showToast({
          title: '转换失败: ' + error.message,
          icon: 'none'
        });
      }
    },
    
    saveImage(item) {
      try {
        // 检查平台
        if (uni.getSystemInfoSync().platform === 'devtools') {
          // 在开发工具中，提供下载链接
          uni.showModal({
            title: '保存提示',
            content: '开发工具中无法直接保存，请右键图片另存为。',
            showCancel: false
          });
          return;
        }
        
        const fs = uni.getFileSystemManager();
        const filePath = `${wx.env.USER_DATA_PATH}/${item.filename}`;
        
        // 将base64数据写入文件
        const base64Data = item.dataUrl.split('base64,')[1];
        fs.writeFile({
          filePath: filePath,
          data: base64Data,
          encoding: 'base64',
          success: () => {
            // 保存图片到相册
            uni.saveImageToPhotosAlbum({
              filePath: filePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: (err) => {
                console.error('保存到相册失败', err);
                uni.showToast({
                  title: '保存到相册失败',
                  icon: 'none'
                });
              }
            });
          },
          fail: (err) => {
            console.error('写入文件失败', err);
            uni.showToast({
              title: '写入文件失败',
              icon: 'none'
            });
          }
        });
      } catch (error) {
        console.error('保存图片出错', error);
        uni.showToast({
          title: '保存图片失败: ' + error.message,
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss">
.icon-generator {
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    color: #333;
  }
  
  .description {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
  
  .icon-container {
    .icon-item {
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
      
      .icon-name {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
        color: #333;
      }
      
      .icon-preview {
        display: flex;
        margin-bottom: 20rpx;
        
        .svg-container, .img-container {
          width: 50%;
          height: 200rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px dashed #eee;
          
          image {
            width: 100rpx;
            height: 100rpx;
          }
        }
      }
      
      .convert-btn, .save-btn {
        margin-bottom: 10rpx;
        font-size: 26rpx;
        height: 70rpx;
        line-height: 70rpx;
      }
      
      .convert-btn {
        background-color: #8B5CFF;
        color: #ffffff;
      }
      
      .save-btn {
        background-color: #FFD687;
        color: #333;
      }
    }
  }
}
</style> 